// nodes/CustomNode.js
import { RectNode, RectNodeModel } from '@logicflow/core'

// 自定义节点模型
class CustomNodeModel extends RectNodeModel {
  initNodeData(data) {
    super.initNodeData(data)
    this.width = 120
    this.height = 80
    this.radius = 5
    this.text = {
      value: data.text || '自定义节点',
      x: data.x,
      y: data.y + 45
    }
    // 自定义属性
    this.properties = {
      ...data.properties,
      priority: data.properties?.priority || 'normal'
    }
  }

  // 自定义节点样式
  getNodeStyle() {
    const style = super.getNodeStyle()
    style.fill = '#f5f5f5'
    style.stroke = '#1890ff'
    style.strokeWidth = 2
    return style
  }

  // 自定义锚点
  getDefaultAnchor() {
    return [
      { x: this.x, y: this.y - this.height/2 }, // 上
      { x: this.x + this.width/2, y: this.y },   // 右
      { x: this.x, y: this.y + this.height/2 },  // 下
      { x: this.x - this.width/2, y: this.y }    // 左
    ]
  }
}

// 自定义节点视图（可选）
class CustomNodeView extends RectNode {
  getShape() {
    const { model } = this.props
    const { x, y, width, height, radius } = model
    const style = model.getNodeStyle()
    
    return h('g', {}, [
      h('rect', {
        ...style,
        x: x - width/2,
        y: y - height/2,
        rx: radius,
        ry: radius,
        width,
        height
      }),
      // 添加自定义标记
      h('path', {
        d: `M${x-width/4},${y-height/4} L${x+width/4},${y+height/4} M${x+width/4},${y-height/4} L${x-width/4},${y+height/4}`,
        stroke: '#ff4d4f',
        strokeWidth: 2
      })
    ])
  }
}

export default {
  type: 'custom-node',
  view: CustomNodeView,
  model: CustomNodeModel
}